/*--------------------------------------------------------------
#0.6	about-us-section
--------------------------------------------------------------*/
.about-us-section {
	background: #f0fbff;
	position: relative;

	&:before {
		content: "";
		@include background-style("../images/dots.png", center center, cover, no-repeat, local);
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

	.details p {
		margin-bottom: 2em;
	}

	.details ul {
		width: 50%;
		float: left;

		@include media-query(1199px) {
			width: 100%;
			float: none;
		}
	}

	ul li {
		color: $heading-color;
		font-weight: 500;
		margin-bottom: 7px;

		i {
			color: $theme-primary-color;
		}
	}

	.btns {
		margin-top: 30px;

		& > a {
			margin-right: 10px;
		}
	}

	.right-col {
		position: relative;

		@include media-query(991px) {
			margin-top: 60px;
		}
	}

	.video-holder {
		width: 100%;
		background-color: $theme-primary-color;
		padding: 8px;
		text-align: center;
		position: absolute;
		left: 0;
		bottom: 0;
		max-width: 600px;

		a {
			color: $white;
		}

		i {
			display: inline-block;
			padding-right: 8px;
		}
	}
}


/*--------------------------------------------------------------
#0.7	service-section
--------------------------------------------------------------*/
.service-section {
	padding-bottom: 90px;

	@include media-query(991px) {
		padding-bottom: 80px;
	}

	@include media-query(767px) {
		padding-bottom: 70px;
	}

	.title-text {
		text-align: right;
		padding-top: 20px;

		@include media-query(991px) {
			text-align: left;
			margin-bottom: 50px;
			padding-top: 0;
		}
	}

	.service-grids {
		margin: 0 -15px;

		@include media-query(767px) {
			margin: 0 -7.5px;
		}

		.grid {
			width: calc(33.33% - 30px);
			float: left;
			margin: 0 15px 30px;
			padding: 40px 35px;
			text-align: center;
			box-shadow: 0px 5px 47.2px 11.8px rgba(19, 30, 74, 0.1);
			@include transition-time(0.3s);
			position: relative;
			top: 0;

			@include media-query(1199px) {
				padding: 40px 35px;
			}

			@include media-query(991px) {
				width: calc(50% - 30px);
			}

			@include media-query(767px) {
				width: calc(50% - 15px);
				padding: 30px 20px;
				margin: 0 7.5px 15px;
			}

			@include media-query(600px) {
				width: calc(100% - 15px);
				float: none;
			}
		}

		.grid:hover {
			top: -10px;
			@include transition-time(0.3s);

		}

		.grid > .fi:before {
			font-size: 50px;
			font-size: calc-rem-value(50);
			color: $theme-primary-color;
		}

		h4 {
			font-size: 18px;
			font-size: calc-rem-value(18);
			margin: 1em 0;

			@include media-query(767px) {
				font-size: 16px;
				font-size: calc-rem-value(16);
			}
		}

		h4 a {
			color: $heading-color;

			&:hover {
				color: $theme-primary-color;
			}
		}

		p {
			font-size: 15px;
			font-size: calc-rem-value(15);
			margin: 0 0 1em;

			@include media-query(767px) {
				font-size: 14px;
				font-size: calc-rem-value(14);
			}
		}

		.read-more {
			font-size: 15px;
			font-size: calc-rem-value(15);
			font-weight: 500;
			color: $heading-color;

			@include media-query(767px) {
				font-size: 14px;
				font-size: calc-rem-value(14);
			}

			&:hover {
				color: $theme-primary-color;
			}

			.fi:before {
				font-size: 15px;
				font-size: calc-rem-value(15);
			}
		}
	}

	.view-all {
		text-align: center;

		p {
			color: $heading-color;
			margin: 25px 0 0;
		}

		a {
			text-decoration: underline;
			color: $theme-primary-color;
		}
	}
}

.services-pg-section {
	padding-bottom: 80px;

	@include media-query(991px) {
		padding-bottom: 70px;
	}

	@include media-query(767px) {
		padding-bottom: 60px;
	}
}


/*--------------------------------------------------------------
#0.8	why-choose-section
--------------------------------------------------------------*/
.why-choose-section {
	background-color: $theme-secondary-color;
	padding-bottom: 70px;

	@include media-query(991px) {
		padding-bottom: 60px;
	}

	@include media-query(767px) {
		padding-bottom: 65px;
	}

	.why-choose-grids {
		margin: 0 -15px;

		@include media-query(767px) {
			margin: 0 -7.5px;
		}

		.grid {
			width: calc(25% - 30px);
			float: left;
			margin: 0 15px 30px;
			text-align: center;
			border: 1px solid transparentize($white, 0.8);
			padding: 35px 25px;
			@include transition-time(0.3s);
			position: relative;
			top: 0;

			@include media-query(1199px) {
				width: calc(50% - 30px);
			}

			@include media-query(767px) {
				width: calc(50% - 15px);
				margin: 0 7.5px 15px;
			}

			@include media-query(600px) {
				width: calc(100% - 15px);
				float: none;
			}
		}

		.fi:before {
			font-size: 50px;
			font-size: calc-rem-value(50);
			color: $theme-primary-color;
		}

		h3 {
			font-size: 18px;
			font-size: calc-rem-value(18);
			color: $white;
			margin: 0.8em 0 0.7em;
		}

		p {
			font-size: 14px;
			font-size: calc-rem-value(14);
			color: #d2d2d2;
			margin: 0;
		}
	}
}


/*--------------------------------------------------------------
#0.9	testimonials-section
--------------------------------------------------------------*/
.testimonials-section {
	background-color: #f0fbff;
	position: relative;
	padding-top: 110px;

	@include media-query(991px) {
		padding: 90px 0 80px;
	}

	@include media-query(767px) {
		padding: 80px 0 70px;
	}

	&:before {
		@include background-style("../images/testimonials-bg-2.png", left bottom, cover, no-repeat, local);
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

	.testimonial-grids img {
		width: auto;
	}

	.testimonial-grids {
		padding-left: 60px;

		@include media-query(991px) {
			padding-left: 0;
		}
	}

	.grid .fi:before {
		font-size: 60px;
		font-size: calc-rem-value(60);
		color: $theme-primary-color;
		display: block;
		padding-left: 3px;
		margin: 1em 0 0.3em;

		@include media-query(991px) {
			font-size: 50px;
			font-size: calc-rem-value(50);
			margin: 0 0 0.3em;
		}

		@include media-query(767px) {
			font-size: 40px;
			font-size: calc-rem-value(40);
		}
	}

	.quote p {
		font-size: 19px;
		font-size: calc-rem-value(19);
		color: $heading-color;
		font-style: italic;

		@include media-query(767px) {
			font-size: 16px;
			font-size: calc-rem-value(16);
		}
	}

	.client-info {
		margin-top: 35px;
		position: relative;
		padding-left: 75px;
		height: 65px;

		.img-holder {
			position: absolute;
			left: 0;
			top: 0;

			img {
				border-radius: 50%;
			}
		}

		h5 {
			font-size: 16px;
			font-size: calc-rem-value(16);
			margin: 0 0 0.3em;
			padding: 0.8em 0 0;

			@include media-query(767px) {
				font-size: 14px;
				font-size: calc-rem-value(14);
			}
		}

		p {
			font-size: 12px;
			font-size: calc-rem-value(12);
			margin: 0;
			line-height: 1.7em;
		}
	}

	.owl-theme .owl-controls {
	    margin-top: 25px;
	    text-align: left;
	}

	.owl-theme .owl-dots .owl-dot span {
		background: #a6b5c0;
	}

	.owl-theme .owl-dots .owl-dot.active span {
		background: $theme-primary-color;
	}

	.testimonial-left-img-holder {
		@include media-query(991px) {
			display: none;
		}
	}
}


/*--------------------------------------------------------------
#1.0	featured-project-section
--------------------------------------------------------------*/
.featured-project-section {
	padding-bottom: 0;

	.project-grids {
		@include background-style("../images/featured-project-bg.jpg", center center, cover, no-repeat, local);

		.grid {
			width: 25%;
			float: left;
			border-right: 1px solid transparentize($white, 0.8);
			@include transition-time(0.3s);
			overflow: hidden;

			@include media-query(1199px) {
				width: 50%;
				border-bottom: 1px solid transparentize($white, 0.8);
			}

			@include media-query(991px) {
				background-color: transparentize($theme-secondary-color, 0.1);
			}

			@include media-query(600px) {
				width: 100%;
				float: none;
			}
		}

		.overlay {
			padding: 280px 60px 60px;
			position: relative;
			top: 60px;
			@include transition-time(0.5s);

			@include media-query(991px) {
				padding: 80px 30px 50px;
				top: 0;
			}

		}

		.grid:hover .overlay {
			background-color: transparentize($theme-secondary-color, 0.1);
			top: 0;
		}

		.count {
			font-family: $heading-font;
			font-size: 40px;
			font-size: calc-rem-value(40);
			font-weight: bold;
			color: $white;

			@include media-query(991px) {
				font-size: 30px;
				font-size: calc-rem-value(30);
			}
		}

		h3 {
			font-size: 22px;
			font-size: calc-rem-value(22);
			color: $white;
			margin-bottom: 1em;

			@include media-query(991px) {
				font-size: 18px;
				font-size: calc-rem-value(18);
			}
		}

		p {
			color: #cecccc;
			margin-bottom: 0;
			padding-bottom: 2em;
			@include transition-time(0.3s);

			@include media-query(991px) {
				font-size: 14px;
				font-size: calc-rem-value(14);
			}
		}

		.overlay > a {
			position: relative;
			top: 100px;

			@include media-query(991px) {
				top: 0;
			}
		}

		.grid:hover .overlay > a {
			top: 0;
		}
	}
}


/*--------------------------------------------------------------
#1.1	partners-section
--------------------------------------------------------------*/
.partners-section {

	.container {
		position: relative;
		padding: 45px 15px;
	}

	.grid {
		text-align: center;
	}

	.grid img {
		width: auto;
		margin: 0 auto;
		display: inline-block;
	}
}


/*--------------------------------------------------------------
#1.2	fun-fact-section
--------------------------------------------------------------*/
.fun-fact-section {
	.fun-fact-grids {
		.grid {
			background-color: $theme-primary-color;
			width: 25%;
			float: left;
			padding: 35px 25px 35px 95px;
			@include transition-time(0.3s);
			position: relative;
			top: 0;

			@include media-query(1199px) {
				width: 50%;
				border-bottom: 1px solid transparentize($white, 0.8);
			}

			@include media-query(767px) {
				
			}

			@include media-query(600px) {
				width: 100%;
				float: none;
			}
		}

		& > .grid:nth-child(even) {
			background-color: darken($theme-primary-color, 5%);
		}

		.fi {
			position: absolute;
			left: 25px;
		}

		.fi:before {
			font-size: 50px;
			font-size: calc-rem-value(50);
			color: $heading-color;
		}

		h3 {
			font-size: 40px;
			font-size: calc-rem-value(40);
			font-weight: bold;
			color: $white;
			margin: 0 0 0.1em;

			@include media-query(767px) {
				font-size: 30px;
				font-size: calc-rem-value(30);
			}
		}

		p {
			color: $white;
			margin: 0;
		}
	}
}


/*--------------------------------------------------------------
#1.3	team-section
--------------------------------------------------------------*/
.team-section {
	padding-bottom: 45px;

	@include media-query(991px) {
		padding-bottom: 25px;
	}

	@include media-query(767px) {
		padding-bottom: 15px;
	}

	.team-grids {
		margin: 0 -15px;

		@include media-query(767px) {
			margin: 0 -7.5px;
		}

		.grid {
			width: calc(25% - 30px);
			float: left;
			margin: 0 15px 50px;
			text-align: center;

			@include media-query(991px) {
				width: calc(50% - 30px);
			}

			@include media-query(767px) {
				width: calc(50% - 15px);
				margin: 0 7.5px 50px;
			}

			@include media-query(500px) {
				width: calc(100% - 15px);
				float: none;
			}
		}

		ul {
			list-style: none;
			display: inline-block;
		}

		ul li {
			float: left;
		}

		ul > li + li {
			margin-left: 10px;
		}

		ul li a {
			background-color: $theme-primary-color;
			width: 35px;
			height: 35px;
			line-height: 35px;
			display: block;
			font-size: 13px;
			font-size: calc-rem-value(13);
			color: $white;
			border-radius: 3px;
		}

		ul li a:hover {
			background-color: darken($theme-primary-color, 10%);;
		}

		.img-social {
			position: relative;
		}

		.social {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 50%;
			@include translatingX();
			opacity: 0;
			visibility: hidden;
			@include transition-time(0.5s);
		}

		.grid:hover .social {
			opacity: 1;
			visibility: visible;
			bottom: 20px;
		}

		.details {
			padding-top: 20px;
		}

		h3 {
			font-size: 18px;
			font-size: calc-rem-value(18);
			font-weight: 500;
			margin: 0 0 0.1em;

			@include media-query(767px) {
				font-size: 16px;
				font-size: calc-rem-value(16);
			}
		}

		h3 + span {
			font-size: 13px;
			font-size: calc-rem-value(13);
			color: $theme-primary-color;
			font-weight: 600;
		}
	}
}


/*--------------------------------------------------------------
#1.4	quote-section
--------------------------------------------------------------*/
.quote-section {
	background-color: #f0fbff;

	.left-col {
		width: 50%;
		float: left;
		padding: 150px 185px 150px 100px;

		@include media-query(1199px) {
			padding: 120px 185px 120px 60px;
		}

		@include media-query(991px) {
			width: 100%;
			float: none;
			padding: 80px 50px 80px 50px;
			height: auto !important;
		}

		@include media-query(767px) {
			padding: 60px 30px;
		}
	}

	.right-col {
		width: 50%;
		float: right;

		@include media-query(991px) {
			width: 100%;
			float: none;
		}
	}

	.left-col h2 {
		font-size: 38px;
		font-size: calc-rem-value(38);
		margin: 0 0 0.8em;
		text-transform: capitalize;
		line-height: 1.3em;

		@include media-query(1199px) {
			font-size: 33px;
			font-size: calc-rem-value(33);
		}

		@include media-query(767px) {
			font-size: 25px;
			font-size: calc-rem-value(25);
		}
	}

	.details p {
		margin-bottom: 2em;
	}

	// .details ul {
	// 	width: 50%;
	// 	float: left;

	// 	@include media-query(1199px) {
	// 		width: 100%;
	// 		float: none;
	// 	}
	// }

	ul li {
		color: $heading-color;
		font-weight: 500;
		margin-bottom: 7px;

		i {
			color: $theme-primary-color;
		}
	}

	.btns {
		margin-top: 30px;

		& > a {
			margin-right: 10px;
			margin-bottom: 10px;
		}
	}

	.right-col {
		@include background-style("../images/quote-bg.jpg", center center, cover, no-repeat, local);
		position: relative;

		@include media-query(991px) {
			height: 800px !important;
		}

		@include media-query(767px) {
			height: 700px !important;
		}
	}

	.quote-area {
		background-color: $white;
		max-width: 470px;
		padding: 60px 55px;
		position: absolute;
		top: calc(50% - 313px);
		left: -85px;
		box-shadow: 0px 9px 42.32px 3.68px rgba(25, 38, 62, 0.1);

		@include media-query(991px) {
			left: 45px;
		}

		@include media-query(767px) {
			left: 0;
			padding: 40px 25px;
			margin: 0 15px;
			top: calc(50% - 283px);
		}

		h3 {
			font-size: 24px;
			font-size: calc-rem-value(24);
			margin: 0 0 0.5em;
		}

		p {
			margin-bottom: 2em;
		}

		input,
		textarea {
			border: 1px solid #e1dfdd;
			height: 45px;
			border-radius: 0;
			box-shadow: none;
		}

		textarea {
			height: 120px;
		}

		form > div + div {
			margin-top: 15px;
		}
	}
}


/*--------------------------------------------------------------
#1.5	blog-section
--------------------------------------------------------------*/
.blog-section {
	padding-bottom: 65px;

	@include media-query(991px) {
		padding-bottom: 55px;
	}

	@include media-query(767px) {
		padding-bottom: 45px;
	}

	.blog-grids {
		margin: 0 -15px;

		@include media-query(767px) {
			margin: 0 -7.5px;
		}

		.grid {
			width: calc(33.33% - 30px);
			float: left;
			margin: 0 15px 30px;

			@include media-query(991px) {
				width: calc(50% - 30px);
			}

			@include media-query(767px) {
				width: calc(50% - 15px);
				margin: 0 7.5px 30px;
			}

			@include media-query(600px) {
				width: calc(100% - 15px);
				float: none;
			}
		}
	}

	.entry-media {
		margin-bottom: 25px;
	}

	.cats {
		font-size: 14px;
		font-size: calc-rem-value(14);
		color: $theme-primary-color;
	}

	.entry-body h4 {
		font-size: 18px;
		font-size: calc-rem-value(18);
		margin: 0.5em 0 0.8em;
		line-height: 1.3em;

		@include media-query(767px) {
			font-size: 16px;
			font-size: calc-rem-value(16);
		}

		a {
			color: $heading-color;
		}

		a:hover {
			color: $theme-primary-color;
		}
	}

	.date {
		font-size: 14px;
		font-size: calc-rem-value(14);
	}

	.read-more {
		font-size: 14px;
		font-size: calc-rem-value(14);
		color: $heading-color;
		font-weight: 500;

		&:hover {
			color: $theme-primary-color;
		}

		.fi:before {
			font-size: 14px;
			font-size: calc-rem-value(14);
			position: relative;
			top: 1px;
		}
	}
}


/*--------------------------------------------------------------
#1.6	cta-section
--------------------------------------------------------------*/
.cta-section {
	background: $theme-secondary-color;
	padding: 70px 0 60px;

	h3,
	h4 {
		color: $white;
		margin: 0;
	}

	p {
		color: #c9c9c9;
		margin: 0;
	}

	h3 {
		font-size: 30px;
		font-size: calc-rem-value(30);
		margin: 0 0 0.6em;

		@include media-query(991px) {
			font-size: 25px;
			font-size: calc-rem-value(25);
		}
	}

	.contact-info {
		overflow: hidden;
		float: right;

		@include media-query(991px) {
			float: none;
		}

		> div {
			float: left;
			position: relative;
			padding-left: 60px;
			padding-bottom: 5px;
			padding-top: 25px;

			@include media-query(991px) {
				padding-left: 45px;
			}

			@include media-query(400px) {
				float: none;
			}
		}

		> div + div {
			margin-left: 55px;

			@include media-query(400px) {
				margin-left: 0;
			}
		}

		i {
			position: absolute;
			left: 0;
		}

		.fi:before {
			font-size: 45px;
			font-size: calc-rem-value(45);
			color: $theme-primary-color;

			@include media-query(991px) {
				font-size: 35px;
				font-size: calc-rem-value(35);
			}
		}

		h4 {
			font-size: 24px;
			font-size: calc-rem-value(24);
			margin: 0 0 0.3em;

			@include media-query(991px) {
				font-size: 18px;
				font-size: calc-rem-value(18);
			}
		}


	}
}